<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="<%= BASE_URL %>js/md5.js"></script>
    <script src="<%= BASE_URL %>js/session-storage.js"></script>
    <script src="<%= BASE_URL %>js/sakana.js"></script>
    <script src="<%= BASE_URL %>js/echarts_5.0.2.min.js"></script>


    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<!--    加载缓存-->
    <div id="app">
      <div style="width: 400px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -50px 0 0 -200px;font-family: YouYuan;
      color: rgba(0, 0, 0, 1) !important;
      font-size: 20px !important;
      font-weight: 400;">

          <div class="loader"></div>
      </div>



    </div>

  <style>
      .loader {
          position: relative;
          width: 2.5em;
          height: 2.5em;
          transform: rotate(165deg);
      }

      .loader:before, .loader:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: 0.5em;
          height: 0.5em;
          border-radius: 0.25em;
          transform: translate(-50%, -50%);
      }

      .loader:before {
          animation: before8 2s infinite;
      }

      .loader:after {
          animation: after6 2s infinite;
      }

      @keyframes before8 {
          0% {
              width: 0.5em;
              box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          }

          35% {
              width: 2.5em;
              box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
          }

          70% {
              width: 0.5em;
              box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
          }

          100% {
              box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
          }
      }

      @keyframes after6 {
          0% {
              height: 0.5em;
              box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          }

          35% {
              height: 2.5em;
              box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
          }

          70% {
              height: 0.5em;
              box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
          }

          100% {
              box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
          }
      }

      .loader {
          position: absolute;
          top: calc(50% - 1.25em);
          left: calc(50% - 1.25em);
      }
  </style>
  </body>
</html>


